<template>
  <div class="add-content-box edit-content" v-for="(item, key) in oaLaserCodeList" :key="item.uuid">
    <div>避障激光{{ key + 1 }}编号</div>
    <el-input class="mt6" v-model="item!.code" placeholder="请输入" clearable></el-input>
    <el-icon name="el-icon-delete" class="delete-icon" @click="() => deleteItem(item)">
      <CircleCloseFilled />
    </el-icon>
  </div>
  <div class="add-content-box add-content mb30" @click="addHandler">新增避障激光</div>
</template>
<script setup lang="ts">
import { defineModel } from "vue";
import { generateUUID } from "@/utils";

const oaLaserCodeList = defineModel("oaLaserCodeList", {
  type: Array,
  default: () => []
});

/**
 * 方法
 */
const deleteItem = (item: any) => {
  oaLaserCodeList.value = oaLaserCodeList.value.filter(itm => itm.uuid != item.uuid);
};

// 添加激光
const addHandler = () => {
  oaLaserCodeList.value.push({ id: 0, code: "", uuid: generateUUID() });
};
</script>
<style lang="scss" scoped>
.add-content-box {
  width: 100%;
  height: 62px;
  background-color: var(--input-background);
}
.add-content {
  display: block;
  width: 100%;
  height: 62px;
  font-size: 16px;
  font-weight: 400;
  line-height: 62px;
  color: #666666;
  text-align: center;
  cursor: pointer;
}
.edit-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  padding: 14px 11px;
  margin-bottom: 30px;
  .delete-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    font-size: 14px;
    cursor: pointer;
  }
}
:deep(.el-input__wrapper) {
  color: #333333;
  background: #ffffff;
}
</style>
